 
<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar
                title="商品详情"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="topimage-div">
            <img :src="goodsInfo.IMAGE1" width="100%"/>
        </div>
        <div class="goods-name">{{goodsInfo.NAME}}</div>
        <div class="goods-price">价格：{{goodsInfo.PRESENT_PRICE | moneyFilter}}</div>
        <div>
            <van-tabs swipeable sticky>
                <van-tab title="商品详情">
                <div class="detail" v-html="goodsInfo.DETAIL">
                    
                </div>
                </van-tab>
                <van-tab title="评价">
                    正在制作中
                </van-tab>
            </van-tabs>
    
        </div>

        <div class="goods-bottom">
            <div>
                <van-button size="large" type="primary" @click="addGoodsToCart">加入购物车</van-button>
            </div>
            <div>
                <van-button size="large" type="danger">直接购买</van-button>
            </div>        
        </div>
    </div>
</template>
 
<script>
    import axios from 'axios'
    import url from '@/serviceAPI.config.js'
    import { Toast } from 'vant'
    import {toMoney} from '@/filter/moneyFilter.js'
    export default {
        data() {
            return {
                goodsId: '',
                goodsInfo:{},
            }
        },
        filters:{
            moneyFilter(money){
                return toMoney(money)
            }
        },
        //声明周期
        created(){
            //以前我们使用了query的方法接收，而现在我们使用params的方法传递，所以要用三元运算符作一下兼容处理。
            this.goodsId= this.$route.query.goodsId ?this.$route.query.goodsId : this.$route.params.goodsId
            console.log(this.goodsId)
            this.getInfo()
        },
        methods: {
            //获取商品的信息
            getInfo() {
                axios({
                    url:url.getDetailGoodsInfo,
                    method:'post',
                    data:{
                        goodsId:this.goodsId
                    }
                })
                .then(response=>{
                    if(response.data.code == 200 && response.data.message ){
                         this.goodsInfo = response.data.message 
                    }else{
                        Toast('服务器错误，数据取得失败')
                    }
                    console.log( this.goodsInfo)
                })
                .catch(error=>{
                    console.log(error)
                })
            },
            //点击返回
            onClickLeft(){
                this.$router.go(-1)
            },

            //向购物车中添加商品
            addGoodsToCart(){
                //取出购物车内的商品数据
                let cartInfo = localStorage.cartInfo? JSON.parse(localStorage.cartInfo): [];
                //判断购物车内是否已经有这个商品
                //如果没有就返回undefind,有就返回第一个查到的数据
                let isHaveGoods = cartInfo.find(cart=>cart.goodsId==this.goodsId)
                console.log(isHaveGoods);
                if(!isHaveGoods){
                    //没有商品直接添加到数组中
                    //重新组成添加到购物车的信息
                    let newGoodsInfo = {
                        goodsId:this.goodsInfo.ID,
                        Name:this.goodsInfo.NAME,
                        price:this.goodsInfo.PRESENT_PRICE,
                        image:this.goodsInfo.IMAGE1,
                        count:1
                    }
                    //添加到购物车中
                    cartInfo.push(newGoodsInfo)
                    //操作本地数据
                    localStorage.cartInfo = JSON.stringify(cartInfo)
                    Toast.success('添加成功')
                }else{
                    Toast.success('已有此商品')
                }
                //跳转
                this.$router.push({name:'Cart'})
            }
        },
    }
</script>
 
<style scoped>
    .detail{
     font-size:0px;
    }
    .goods-name{
        background-color: #fff;
    }
    .goods-price{
        background-color: #fff;
    }
    .goods-bottom{
    position: fixed;
    bottom:0px;
    left:0px;
    background-color: #FFF;
    width:100%;
 
    display: flex;
    flex-direction: row;
    flex-flow: nowrap;
}
.goods-bottom > div{
    flex:1;
    padding:5px;
}
</style>

<!--<template>
    <div>
        商品详情页面
    </div>
</template>
 
<script>
    import axios from 'axios'
    import url from '@/serviceAPI.config.js'
    export default {
        data() {
            return {
                goodsId: '775e575ce28a4f89b1dfe2c99eb08ae7'
            }
        },
        created(){
            
            this.getInfo()
        },
        methods: {
            getInfo() {
                axios({
                    url:url.getDetailGoodsInfo,
                    method:'post',
                    data:{
                        goodsId:this.goodsId
                    }
                })
                .then(response=>{
                    console.log(response)
                })
                .catch(error=>{
                    console.log(error)
                })
            }
        },
    }
</script>
 
<style scoped>
 
</style>-->



